<template>
  <el-dialog
    title="手动导入"
    center
    width="30%"
    :visible.sync="dialogData.isShow"
  >
    <div style="text-align: center">
      <span>A的openid</span>
      <el-input
        size="mini"
        v-model="openIds.openIdA"
        maxlength="50"
        @change="changeOpenId"
      ></el-input>
      <span>B的openid</span>
      <el-input
        size="mini"
        v-model="openIds.openIdB"
        maxlength="50"
        @change="changeOpenId"
      ></el-input>
    </div>
    <div style="text-align: center">
      <el-button type="success" style="margin:10px 0" @click="toSearchOpenId">
        查询
      </el-button>
      <p v-show="content">{{ content }}</p>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="success" plain @click="dialogData.isShow = false">
        取 消
      </el-button>
      <el-button
        type="success"
        @click="confirm"
        :disabled="isConfirm"
        :loading="loading"
      >
        进行关联
      </el-button>
    </span>
  </el-dialog>
</template>
<script>
import { verifyOpenId } from '@/api/openIdRelationAB/openidUserInfo'
import { manualImport } from '@/api/openIdRelationAB/openidUserRelation'
export default {
  props: ['dialogData'],
  data() {
    return {
      openIds: {
        openIdA: '',
        openIdB: ''
      },
      content: '',
      isConfirm: true,
      loading: false
    }
  },
  mounted() {},
  methods: {
    /* 查询openid */
    toSearchOpenId() {
      if (!this.openIds.openIdA || !this.openIds.openIdB) {
        this.content = ''
        return
      }
      verifyOpenId(this.openIds, (res) => {
        if (res[0].exists && res[1].exists) {
          this.content = '存在A的openid和手机号；存在B的openid和手机号'
          this.isConfirm = false
        } else if (!res[0].exists && !res[1].exists) {
          this.content = '不存在A的openid和手机号；不存在B的openid和手机号'
        } else if (!res[0].exists && res[1].exists) {
          this.content = '不存在A的openid和手机号；存在B的openid和手机号'
        } else if (res[0].exists && !res[1].exists) {
          this.content = '存在A的openid和手机号；不存在B的openid和手机号'
        }
      })
    },
    /* 改变openId禁用关联按钮 */
    changeOpenId() {
      this.isConfirm = true
    },
    /* 关联 */
    confirm() {
      this.loading = true
      manualImport(
        this.openIds,
        () => {
          this.loading = false
          this.$emit('handleRefresh', () => {
            this.$message.success('导入成功')
          })
          this.dialogData.isShow = false
        },
        (error) => {
          this.loading = false
          this.$message.error(error.message)
          this.isConfirm = true
        }
      )
    }
  }
}
</script>
<style lang="less" scoped>
:deep(.el-input) {
  width: 100px;
  margin: 0 5px;
}
</style>
